<template>
	<view class="page-index">





		<view class="p15">
			<view class="module-activity">

				<view class="">
					<view class="bg-white bg-shaw brs10 mb12 p12" v-for="(item,index) in flowList" :key="index"
						@click="toInfo(item.id)">


						<view class="" style="width: 100%;">
							<view class="u-flex u-f-jsb">
								<span class=" c3 fz15 u-font-bold">{{item.shop.shopname}}</span>
								<span class="c9 fz12">{{item.status==1?'待服务':'已完成'}}</span>
							</view>
							<view class="fz12 c9 u-flex mt12">

								预约人：{{item.name}}
							</view>
							<view class="fz12 c9 u-flex mt8 u-f-jsb">

								<span>联系电话：{{item.phone}}</span>
								
								<view  v-if="item.certificate==1 && item.status==2">
									<button type="primary" @click.stop="curId=item.id,isShowPopup=true" class="btn1">上传服务凭证</button>
								</view>
							</view>
						</view>
					</view>
				</view>

				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</view>
<u-popup v-model="isShowPopup" mode="center" :closeable="false" border-radius="15">
			<view class="p20" style="width: 600rpx;">
				<view class="u-flex u-f-justify">上传服务凭证</view>
				<view class="mt20">
					<view class="mt12 u-flex module-images" style="flex-wrap: wrap;">

						<view class="img-item" v-for="(img,imgIndex) in imgUrl" :key="imgIndex">

							<u-icon name="close-circle-fill" class="ic-del" @click="toDel(imgIndex)"></u-icon>
							<image :src="img" style="width: 100%;height: 100%;" mode="aspectFill"></image>

						</view>
						<view v-if="imgUrl.length<=2" class="img-add u-flex u-f-justify" @click="getImage">
							<u-icon name="plus" class="fz20 c9"></u-icon>
						</view>
					</view>

				</view>

				<view class="fixed-bottom module-btn" style="position: inherit;padding: 0;">
					<button type="primary" @click="toSave" class="btn mt15">确定上传</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				imgUrl:[],
				isShowPopup:false,
				curId:'',
				flowList: [],
			}
		},
		onShareAppMessage(e) {},
		onShareTimeline() {

		},
		onShow() {},
		onLoad(e) {
			this.$nextTick(() => {
				this.initData()
			})
		},

		// 页面下拉到底部触发
		onReachBottom() {
			console.log(this.loadStatus, 11111)
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			
			
			toDel(idx) {
				this.imgUrl.splice(idx, 1)
			},
			getImage() {
				uni.chooseImage({
			
					success: res => {
						uni.request({
							url: '/wanlshops/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											uni.uploadFile({
												url: updata.data.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.data
													.storage == 'local' ?
													null : updata.data
													.multipart,
												success: data => {
													let url = JSON.parse(
															data.data).data
														.fullurl
													console.log(data, 1212)
													this.imgUrl.push(url)
												},
												fail: error => {
													this.$wanlshop.msg(JSON
														.parse(error
															.data).msg);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			toSave() {
			
			
				uni.request({
					url: '/wanlshop/index/subscribeUpload',
					data: {
						id: this.curId,
						image: String(this.imgUrl)
					},
					method: 'POST',
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
			
			
							uni.showToast({
								title: '提交成功'
							})
							this.isShowPopup = false
							this.initData()
						}
					}
				});
			
			},
			toInfo(id) {
				uni.navigateTo({
					url: '/pages/user/appointment/detail?id=' + id
				})
			},
			initData() {
				this.page = 1
				this.flowList = []
				this.getData()

			},
			getData() {
				let post = {
					page: 1,
					...this.search
				}
				uni.request({
					url: '/wanlshop/index/mySubscribe',
					data: post,
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							let _list = res.res.data.data
							this.flowList = [...this.flowList, ..._list]
							// 判断所有数据是否请求完毕
							if (res.res.data.total > this.flowList.length) {
								this.page++
								this.loadStatus = 'more'
							} else {
								this.loadStatus = 'noMore'
							}

						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.act-img {
		width: 382rpx;
		height: 188rpx;
		display: block;
	}
	.btn1{
		height:60rpx;
		    background: #1a2a7e !important;
		    color: #fff;
		    display: flex;
		    font-size: 26rpx;
		    align-items: center;
		    justify-content: center;
		    border-radius: 50rpx;
		    text-align: center;
	}
.module-images {
		.img-item {
			width: 150rpx;
			height: 150rpx;
			position: relative;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}

		.ic-del {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			font-size: 36rpx;
			color: red;
			z-index: 2;
		}

		.img-add {
			background: #F8F8F8;
			width: 150rpx;
			height: 150rpx;
			font-size: 40rpx;
			margin-bottom: 20rpx;
		}
	}
	.search-select {
		background: #fff;
		border-radius: 50rpx;
		padding: 12rpx 18rpx;
		width: 150rpx;
	}

	page {}

	.page-content {
		background: #fff;
		border-radius: 30rpx;
		position: relative;
		top: -30rpx;
	}

	.ic-play {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;

	}

	.module-banner {
		height: 280rpx;


	}

	.module-activity {}

	// .index-act{
	// 	.act1{
	// 		height: 188rpx;
	// 		background:url('https://dl.nhbdic.com/admin-api/infra/file/18/get/image/bg-act1.png');
	// 		background-size: cover;
	// 	}
	// 	.act2{
	// 		height: 188rpx;
	// 		background:url('https://dl.nhbdic.com/admin-api/infra/file/18/get/image/bg-act.png');
	// 		background-size: cover;
	// 	}
	// }
	.bg-img-block {
		background: #1a2a7e;
		height: 500rpx;
	}

	.module-user {
		padding-bottom: 50rpx;
		background: #1a2a7e;
	}

	.btn-view {
		background: #1a2a7e;
		color: #fff;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;

	}
</style>